<template>
<div>
    <div class="publish-range">
      <div class="range-list" v-for="(item,index) in rangeInfo" :key="index">
          <span class="range-index">{{index+1}}</span>
          <Tooltip max-width="500">
            <span class="range-name">{{item.first_author_affiliation||item.publisher}}</span>
            <div slot="content">
              <p>机构名：{{item.first_author_affiliation||item.publisher}}</p>
           </div>
          </Tooltip>
          <br>
          <span class="range-nums"><Icon type="ios-paper" style="width:10%" size="22" /> 共发表{{item._count_id}}篇</span>
      </div>
    </div>
</div>
</template>

<script>
import service from "@/service/papers";

export default {
  components: {
    //someComponent
  },
  props: [
    "chartId",
    "chartYjryData",
    "chartLwData",
    "centerData",
    "lwxzList",
    "ids",
  ],
  data() {
    return {
      keys: {
        1062: "first_author_affiliation",
        1065: "publisher",
        1040: "di_yi_zuo_zhe_dan_wei_zhu_shi",
        1050: "di_yi_zuo_zhe_dan_wei_zhu_shi",
        1051: "di_yi_zuo_zhe_dan_wei_zhu_shi",
        1052: "di_yi_zuo_zhe_dan_wei_zhu_shi",
        1070: "first_author_affiliation",
        1068: "first_author_affiliation",
        1066: "first_author_affiliation",
        1067: "first_author_affiliation",
      },
      key: "",
      rangeInfo:[],
    };
  },
  computed: {},
  watch: {
    ids(newValue, oldValue) {
      this.key = this.keys[newValue] || 'first_author_affiliation';
      this.getDatas(newValue);
    },
  },
  mounted: function () {
    if (this.ids || this.ids == 0) {
      this.key = this.keys[this.ids] || 'first_author_affiliation';
      this.getDatas();
    }
  },
  methods: {
    getDatas(id) {
      service
        .getDatas(
          {
            columns: [this.key, "count:id"],
            group: [this.key],
            order: [["count:id", 1]],
            filter: [
              [this.key, 1, "无"],
              [this.key, 1, ""],
            ],
            pageSize: 10,
          },
          id || this.ids || "1062"
        )
        .then((res) => {
          this.rangeInfo = res.data;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.publish-range{
    border-radius: 8px;
    overflow: hidden;
    white-space: nowrap;
    .range-index{
        display: inline-block;
        width: 10%;
        text-align: center;
        background: url(../../../assets/range-bg.png) no-repeat;
        background-size: 30px 30px;
        background-position: 50% 50%;
        height: 40px;
        line-height: 45px;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
    }
    .range-title{
        text-align: center;
        background: var(--single-color);
        color: white;
        font-weight: bold;
        padding: 20px 22px;
        font-size: 17px;
        text-align: left;
    }
    .range-name{
        color: #666;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 21vw;
        display: inline-block;
        vertical-align: middle;
    }
    .range-nums{
        color: #999;
        padding-top: 10px;
    }
    .range-list{
        padding:7px 10px
    }
    .range-list:hover{
        background: rgb(250,250,250);
        cursor: pointer;
    }
  }
@media (max-width:1060px) {
  .publish-range{
    .range-name{
        width: 75vw;
    }
  }
}
</style>
